<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5.7.2.2-遍历数组</title>
</head>

<body>
    <div id="container"></div>
</body>
<script>
    /**
     * 什么是可迭代对象
     * - ES2015 为 JavaScript 定义了迭代协议（iteration protocol），
     *    它不是新的语法，而是一种协议
     * - 具体来说，一个对象能否被迭代，
     *    取决于该对象或者该对象的原型是否实现了 @@iterator 方法
     * - @@[name] 标志在 ECMAScript 规范里用来代指 JavaScript 内建的 symbols 值，
     *    例如 @@iterator 指的就是 Symbol.iterator 这个值
     */

    // 一个对象实现了 Symbol.iterator 方法，那么这个对象就是可以迭代的，
    const obj = {
        val: 0,
        [Symbol.iterator]() {
            return {
                next() {
                    return {
                        value: obj.val++,
                        done: obj.val > 10 ? true : false
                    }
                }
            }
        }
    }

    for (const value of obj) {
        console.log(value)  // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
    }


    
    /**
     * 数组内建了 Symbol.iterator 方法的实现，
     * */ 
    const arr = [1, 2, 3, 4, 5]
    const itr = arr[Symbol.iterator]()
    console.log(itr.next())  // {value: 1, done: false}
    console.log(itr.next())  // {value: 2, done: false}
    console.log(itr.next())  // {value: 3, done: false}
    console.log(itr.next())  // {value: 4, done: false}
    console.log(itr.next())  // {value: 5, done: false}
    console.log(itr.next())  // {value: undefined, done: true}

</script>

</html>